<template>
  <div class="page">
    <div class="banner">
      <img class="imgage"
        src="https://img10.360buyimg.com/imgzone/jfs/t26605/169/1977936343/399327/465887d6/5bf40b34N7096a5bc.jpg"
        mode="widthFix"
      />
    </div>
    <div class='jiangpin'>
      <div class='text1'>奖品：伊利莎白一世柴犬抱枕</div>
      <div class='text2'>2018年11月29日 11:06 自动开奖</div>
    </div>
    <div class='jieshao'>
      成都黑眼圈网络科技是国内第一家为电商用户提供黑眼圈技术支持的公司，公司先后开发了黑眼圈订单系统，黑眼圈单品系统，黑眼圈多品系统成为行业内使用量最多的系统，为电商行业提供了强大的技术支持，以及各种网络解决方案。
    </div>

    <div class='shangpin'>
      <img
        class="imgae"
        src="https://img10.360buyimg.com/imgzone/jfs/t1/11602/25/267/152728/5be2c599E9c88def6/3c4e225ed5db392d.jpg"
        mode="widthFix"
      />
    </div>

    <div class="choujiang">

      <div class="mycj">
        <div style="display: flex; justify-content: space-between; width: 80%; margin-right: auto; margin-left: auto;">
          <div>
            <div style="width: 12px;height: 12px;background: rgb(126,162,111);border-radius: 100%;  "></div>
            <div style="width: 8px;height: 25px;background: rgb(206,234,195);margin-left: 2px;border-radius: 8px;margin-top: -28px "></div>
          </div>
          <div>
            <div
              style="width: 12px;height: 12px;background: rgb(126,162,111);border-radius: 100%; "
              data-width="12px"
            ></div>
            <div style="width: 8px;height: 25px;background: rgb(206,234,195);margin-left: 2px;border-radius: 8px;margin-top: -28px "></div>
          </div>
        </div>
        <div style="background: rgb(165,199,151);padding: 5px;    margin-top: -15px;">
          <div style="border:1px solid rgb(255,255,255);padding: 15px 10px;">
            <div>您本次活动拥有 5 次竞猜的机会</div>
            <div>我的幸运数字: 0.68</div>
            <div>我的幸运数字: 0.41</div>
          </div>
        </div>
      </div>

      <div
        class="mycj"
        style="padding-top:80rpx;"
      >
        <div style="display: flex; justify-content: space-between; width: 80%; margin-right: auto; margin-left: auto;">
          <div>
            <div style="width: 12px;height: 12px;background: rgb(126,162,111);border-radius: 100%;  "></div>
            <div style="width: 8px;height: 25px;background: rgb(206,234,195);margin-left: 2px;border-radius: 8px;margin-top: -28px "></div>
          </div>
          <div>
            <div
              style="width: 12px;height: 12px;background: rgb(126,162,111);border-radius: 100%; "
              data-width="12px"
            ></div>
            <div style="width: 8px;height: 25px;background: rgb(206,234,195);margin-left: 2px;border-radius: 8px;margin-top: -28px "></div>
          </div>
        </div>
        <div style="background: rgb(165,199,151);padding: 5px;    margin-top: -15px;">
          <div style="border:1px solid rgb(255,255,255);padding: 15px 10px;">
            <div>本期中奖用户：goingta</div>
            <div>本期中奖数字：0.88</div>
            <div>该用户参与次数：1次</div>
            <div>本期参与总人数：22222 人</div>
            <div>本期参与总次数：33333 人</div>
            <div class="hi40"> </div>
            <div>本次参与总次第一数字0.01 一共8888次</div>
            <div>本次参与总次第二数字0.02 一共5555次</div>
            <div>本次参与总次第三数字0.03 一共1111次</div>
            <div class="hi40"> </div>
            <div>本次奖品快递：顺丰快递</div>
            <div>本次奖品单号：11111111</div>
            <div class="hi40"> </div>
            <div>您本次活动拥有 5 次竞猜的机会</div>
            <div>我的幸运数字: 0.68</div>
            <div>我的幸运数字: 0.41</div>
          </div>
        </div>
      </div>

      <input
        class="input"
        placeholder='请输入你的幸运数字'
        data-type="username"
        bindinput="onChange"
        type="digit"
        value=""
        maxlength="5"
      />
      <button class="button">提交</button>
      <div class="jilu">参与人数：1111 参与次数：2222</div>
      <div class="touxiang">
        <img src="/static/images/touxiang/0.jpg" class="img" />
        <img src="/static/images/touxiang/2.jpg" class="img" />
        <img src="/static/images/touxiang/3.jpg" class="img" />
        <img src="/static/images/touxiang/1.jpg" class="img" />
        <img src="/static/images/touxiang/4.jpg" class="img" />
        <img src="/static/images/touxiang/5.jpg" class="img" />
        <img src="/static/images/touxiang/6.jpg" class="img" />
        <img src="/static/images/touxiang/7.jpg" class="img" />
        <img src="/static/images/touxiang/8.jpg" class="img" />
        <img src="/static/images/touxiang/9.jpg" class="img" />
        <img src="/static/images/touxiang/10.jpg" class="img" />
        <img src="/static/images/touxiang/11.jpg" class="img" />
        <img src="/static/images/touxiang/4.jpg" class="img" />
        <img src="/static/images/touxiang/5.jpg" class="img" />
        <img src="/static/images/touxiang/6.jpg" class="img" />
        <img src="/static/images/touxiang/7.jpg" class="img" />
        <img src="/static/images/touxiang/8.jpg" class="img" />
        <img src="/static/images/touxiang/9.jpg" class="img" />
        <img src="/static/images/touxiang/10.jpg" class="img" />
        <img src="/static/images/touxiang/11.jpg" class="img" />
        <img src="/static/images/touxiang/11.jpg" class="img" />
        <img src="/static/images/touxiang/11.jpg" class="img" />
        <div class="mt20">查看更多</div>
      </div>
    </div>
    <div class="copyright">本活动最终解释权归成都黑眼圈网络科技所有</div>
  </div>
</template>
<script>
export default {
  mounted () {
    const { id } = this.$route.query
    console.log(id)
  }
}
</script>
<style lang="scss" scoped>
.page {
  background: #eee;
}
.banner {
  .image {
    width: 100%;
  }
}
.jiangpin {
  background: #fff;
  padding: 20rpx;
  line-height: 150%;
  .text2 {
    font-size: 13px;
    letter-spacing: 0.3px;
    color: #808080;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.jieshao {
  margin-top: 20rpx;
  padding: 40rpx 20rpx;
  background: #fff6e7;
  line-height: 150%;
  text-indent: 2em;
  color: #786f60;
}
.shangpin {
  margin-top: 20rpx;
  background: #fff;
}
.choujiang {
  margin-top: 20rpx;
  background: #fff;
  padding: 40rpx;
  .mycj {
    color: #fff;
    font-size: 32rpx;
    line-height: 170%;
    .input {
      margin-top: 20rpx;
      padding: 20rpx;
      border: 1px solid #eee;
      margin-bottom: 20rpx;
    }
    .button {
      background: rgb(126, 162, 111);
      color: #fff;
      border: 0;
    }
    .jilu {
      font-size: 13px;
      letter-spacing: 0.3px;
      color: #808080;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      padding: 40rpx 0;
    }
  }
  .touxiang {
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: #808080;
    .img {
      width: 50rpx;
      height: 50rpx;
      margin-left: 10rpx;
    }
  }
}
</style>
